$f: 19.2;
img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}


@keyframes fadeInUp_ {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0)
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

.fadeInUp_ {
  -webkit-animation-name: fadeInUp_;
  animation-duration: 2s;
  animation-name: fadeInUp_
}

.common_bg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}


:root {
  --color: #3279FF;
}


.header {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.03);
  .logo{
    img:nth-child(1){
      opacity: 0;
    }
    img:nth-child(2){
      opacity: 1;
    }
  }
  .links{
    .item{
      a{
        color:#000;
        &::after{
          background: #000;
        }
        svg{
          filter: invert(100%);
        }
      }
    }
  }
  .btns{
    a{
      border-color: #000;
      color: #000;
      &:hover{
        background: #000;
        color:white;
      }
    }
  }
}


.form_common {
  position: relative;
  padding: 93/$f+vw 0 100/$f+vw;
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background:  #f5f5f5;
    width: 100%;
    height: 100%;
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .wrap {
    width: 1440/$f+vw;
    margin: 0 auto;
    .title {
      margin: 0 0 52/$f+vw;
      h3 {
        color: #000;
        font-size: 48/$f+vw;
        font-weight: 600;
        letter-spacing: 0.96/$f+vw;
        text-transform: capitalize;
        margin: 0 0 14/$f+vw;
      }
      p {
        color: #000;
        font-size: 20/$f+vw;
        font-weight: 400;
        letter-spacing: 1/$f+vw;
        text-transform: uppercase;
      }
    }
    form {
      width: 989/$f+vw;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        width: 478/$f+vw;
        margin: 0 0 40/$f+vw;
        h5 {
          color: #000;
          font-size: 16/$f+vw;
          font-weight: 300;
          line-height: 125%;
          text-transform: capitalize;
          margin: 0 0 9/$f+vw;
        }
        input {
          width: 478/$f+vw;
          height: 52/$f+vw;
          padding: 0 24/$f+vw;
          border-radius: 8/$f+vw;
          border: 1/$f+vw solid #000;
          background: unset;
          color: #000;
          font-size: 16/$f+vw;
          font-weight: 300;
        }
        textarea {
          width: 100%;
          height: 108/$f+vw;
          padding: 15/$f+vw 24/$f+vw;
          border-radius: 8/$f+vw;
          border: 1/$f+vw solid #000;
          background: unset;
          color: #000;
          font-size: 16/$f+vw;
          font-weight: 300;
          resize: none;
        }
        select {
          width: 478/$f+vw;
          height: 52/$f+vw;
          padding: 0 24/$f+vw;
          border-radius: 8/$f+vw;
          border: 1/$f+vw solid #000;
          background: unset;
          color: #000;
          font-size: 16/$f+vw;
          font-weight: 300;
          -webkit-appearance: none;
          -moz-appearance: none;
          -ms-appearance: none;
          -o-appearance: none;
          appearance: none;

        }
        .select {
          position: relative;
          img {
            display: block;
            position: absolute;
            width: 18/$f+vw;
            height: 18/$f+vw;
            top: 50%;
            transform: translateY(-50%);
            right: 24/$f+vw;
          }
        }


      }
      .item1 {
        width: 100%;
      }
      .prompt {
        width: 100%;
        margin: -17/$f+vw 0 0;
        h5 {
          color: #000;
          font-size: 16/$f+vw;
          font-weight: 300;
          line-height: 125%;
          text-transform: capitalize;
          margin: 0 0 12/$f+vw;
        }
        p {
          color: #000;
          font-size: 16/$f+vw;
          font-weight: 300;
          line-height: 125%; /*  */
          text-transform: capitalize;
          a {
            position: relative;
            transition: 0.6s;
            &::after {
              content: "";
              width: 100%;
              height: 1/$f+vw;
              background: #000;
              position: absolute;
              left: 0;
              bottom: 3/$f+vw;
              transition: 0.6s;
            }
            &:hover {
              color: #5E9EFF;
              &::after {
                background: #5E9EFF;
              }
            }
          }
        }
      }
      .btn {
        width: 100%;
        margin: 60/$f+vw 0 0;
        button {
          display: flex;
          width: fit-content;
          padding: 8/$f+vw 30/$f+vw;
          justify-content: center;
          align-items: center;
          gap: 20/$f+vw;
          border-radius: 91/$f+vw;
          border: 1/$f+vw solid #000;
          background: #000;
          transition: all 600ms;
          color: #FFF;
          font-size: 20/$f+vw;
          cursor: pointer;
          margin: 0 auto;
          p {
            line-height: 2;
            letter-spacing: 1/$f+vw;
            text-transform: uppercase;
          }
          svg{
            width: 16/$f+vw;
            display: block;
          }

          &:hover {
            background: #5E9EFF;
            border-color: #5E9EFF;
          }
        }
      }
    }
  }
}
.select2-container .select2-selection--single {
  height: 52/$f+vw;
}
.select2-container--default .select2-selection--single {
  padding: 0 24/$f+vw;
  border-radius: 8/$f+vw;
  border: 1/$f+vw solid #000;
  background: unset;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 52/$f+vw;
  color: #000;
  font-size: 16/$f+vw;
  font-weight: 300;
  text-transform: capitalize;
}
.select2-selection__arrow {
  display: none;
}
.select2-dropdown {
  border: none;
  border-radius: 8/$f+vw;
  padding: 14/$f+vw;
}
.select2-results__option {
  padding: 12/$f+vw 10/$f+vw;
  border-radius: 4/$f+vw;
}
.select2-container--default .select2-results__option--selected {
  background: #DCE8FE;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  border-color: #5E9EFF;
}
.select2-container--default .select2-results>.select2-results__options {
  max-height: 300/$f+vw;
}

.home {

  .section1{
    padding: 180/$f+vw 240/$f+vw 100/$f+vw 240/$f+vw;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    overflow: hidden;
    .go_text{
      position: absolute;
      left: 0;
      bottom: 8/$f+vw;
      z-index: -1;
      .marquee-scroll{
        display: flex;
        width: 100vw;


      }
      .marquee-content{
        display: flex;
        .list{
          width: fit-content;
          opacity: 0.25;
          background: linear-gradient(270deg, rgba(216, 216, 216, 0.20) 0%, #D8D8D8 46.5%, rgba(216, 216, 216, 0.20) 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 240/$f+vw;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          text-transform: uppercase;
          margin: 0 30/$f+vw 0 0;
        }
      }
    }
    .l{
      width: 700/$f+vw;
      h1{
        color: #000;
        font-size: 48/$f+vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.96px;
        text-transform: capitalize;
        margin: 0 0 44/$f+vw;
      }
      .text{
        color: #000;
        font-size: 20/$f+vw;
        font-style: normal;
        font-weight: 300;
        line-height: 30/$f+vw;
      }
    }
    .img{
      width: 660/$f+vw;
      height: 776/$f+vw;
      border-radius: 20/$f+vw;
      overflow: hidden;
      &:hover{
        img{
          transform: scale(1.05);
        }
      }
      img{
        width: 100%;
        height: 100%;
        transition: .6s;
      }
    }
  }

  .section2{
    padding: 0 240/$f+vw;
    position: relative;
    z-index: 1;
    overflow: hidden;
    .bg{
      position: absolute;
      left: 0;
      width: 100%;
      top: 368px;
      z-index: -1;
    }
    .matter1{
      padding: 0 0 100/$f+vw ;
      &>h1{
        color: #000;
        font-size: 48/$f+vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.96px;
        text-transform: capitalize;
      }
      .content{
        margin: 80/$f+vw 0 0 0;
        display: flex;
        grid-template-columns: repeat(4,1fr);
        gap: 0 24/$f+vw;
        .item{
          width: 100%;
          height: 500/$f+vw;
          border-radius: 20/$f+vw;
          background: #F5F5F5;
          padding: 30/$f+vw 24/$f+vw 24/$f+vw 24/$f+vw;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: .6s;
          position: relative;
          &:hover{
            background: var(--color);
            .circle{
              opacity: 1;
            }
            .num{
              color: #fff;
            }
            .b{
              h1{
                color: #fff;
              }
              .pick{
                color: #fff;
                max-height: 224/$f+vw;
              }
            }
          }
          &:nth-child(1) {
            margin: 57/$f+vw 0 0 0;
          }
          &:nth-child(2) {
            margin: 140/$f+vw 0 0 0;
          }
          &:nth-child(4) {
            margin: 77/$f+vw 0 0 0;
          }
          .circle{
            position: absolute;
            top: 0;
            right: 0;
            opacity: 0;
            width: 186/$f+vw;
            transition: .6s ease;
          }
          .num{
            color: #000;
            font-size: 32/$f+vw;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            transition: .6s;
          }
          .b{
            h1{
              overflow: hidden;
              color: #000;
              text-overflow: ellipsis;
              font-size: 32/$f+vw;
              font-style: normal;
              font-weight: 500;
              line-height: normal;
              margin: 0 0 12/$f+vw;
              transition: .6s;
            }
            .pick{
              color: #000;
              font-size: 18/$f+vw;
              font-style: normal;
              font-weight: 300;
              line-height: 28/$f+vw; /* 155.556% */
              max-height: 85/$f+vw;
              overflow: hidden;
              transition: .6s;
            }
          }
        }
      }
    }
    .matter2{
      .title{
        text-align: center;
        h1{
          color: #000;
          font-size: 48/$f+vw;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          letter-spacing: 0.96px;
          text-transform: capitalize;
          margin: 0 0 10/$f+vw;
        }
        p{
          color: #000;
          font-size: 20/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          letter-spacing: 1px;
          text-transform: uppercase;
        }
      }
      .grid{
        margin: 80/$f+vw 0 0 0;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 40/$f+vw 30/$f+vw;
        .item{
          width: 100%;
          height: 379/$f+vw;
          border-radius: 20/$f+vw;
          background: #F5F5F5;
          padding: 40/$f+vw 30/$f+vw 30/$f+vw 30/$f+vw;
          &:hover{
            .icon{
              svg{
                transform: rotateY(180deg);
              }
            }
          }

          .icon{
            width: 60/$f+vw;
            height: 60/$f+vw;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 21/$f+vw;
            svg{
              max-width: 100%;
              max-height: 100%;
              transition: 1s;
            }
          }
          h1{
            color: #000;
            text-overflow: ellipsis;
            font-size: 32/$f+vw;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin: 0 0 12/$f+vw;
          }
          .text{
            color: #000;
            font-size: 18/$f+vw;
            font-style: normal;
            font-weight: 300;
            line-height: 28/$f+vw; /* 155.556% */
          }
        }
      }
    }
    .matter3{
      margin: 100/$f+vw 0 86/$f+vw 0;
      h1{
        text-align: center;
        color: #000;
        font-size: 48/$f+vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.96px;
        text-transform: capitalize;
      }
      .content{
        margin: 74/$f+vw 0 0 0;
        height: 702/$f+vw;
        background: #F5F5F5;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .matter4{
      margin: 0 0 64/$f+vw;
      &>h1{
        text-align: center;
        color: #000;
        font-size: 48/$f+vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.96px;
        text-transform: capitalize;
      }
      .swiper-pagination{
        position: static;
        width: fit-content;
        margin: 44/$f+vw auto 0;
        gap: 0 16/$f+vw;
        display: flex;
        span{
          width: 12/$f+vw;
          height: 12/$f+vw;
          background: rgba(0, 0, 0, 0.30);
          opacity: 1!important;
          transition: .6s ease;
          &.swiper-pagination-bullet-active{
            background: #000;
          }
        }

      }
      .swiper1{
        margin: 80/$f+vw 0 0 0;
        .swiper-slide{
          .item{
            border-radius: 0px 20/$f+vw;
            position: relative;
            width: 100%;
            height: 473/$f+vw;
            z-index: 1;
            overflow: hidden;
            padding: 40/$f+vw 30/$f+vw;
            &:hover{
              &:before{
                opacity: 1;
              }
            }
            &:before{
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              z-index: 1;
              border-radius: 0px 20/$f+vw;
              background: linear-gradient(120deg, #85AFFF 12.34%, #BDD4FF 95.15%);
              opacity: 0;
              transition: .6s;
            }
            &:after{
              content: '';
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              z-index: -1;
              background: #F5F5F5;
            }
            h1{
              overflow: hidden;
              color: #000;
              text-overflow: ellipsis;
              font-size: 32/$f+vw;
              font-style: normal;
              font-weight: 500;
              line-height: normal;
              margin: 0 0 12/$f+vw;
              position: relative;
              z-index: 1;
            }
            .text{
              color: #000;
              font-size: 18/$f+vw;
              font-style: normal;
              font-weight: 300;
              line-height: 28/$f+vw; /* 155.556% */
              position: relative;
              z-index: 1;
            }
            .download{
              margin: 82/$f+vw 0 0 0;
              position: relative;
              z-index: 1;
              display: flex;
              width: 400/$f+vw;
              height: 83/$f+vw;
              padding: 20/$f+vw;
              justify-content: space-between;
              align-items: center;
              gap: 10/$f+vw;
              border-radius: 10/$f+vw;
              background: rgba(255, 255, 255, 0.60);
              backdrop-filter: blur(2px);
              p{
                overflow: hidden;
                color: #000;
                text-overflow: ellipsis;
                font-size: 25/$f+vw;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                text-transform: capitalize;
              }
              .circle{
                width: 34/$f+vw;
                height: 34/$f+vw;
                border-radius: 50%;
                background: #000;
                display: flex;
                align-items: center;
                justify-content: center;
                svg{
                  width: 14/$f+vw;
                  height: 14/$f+vw;
                }
              }
            }
          }
        }
      }
    }
  }

  //   表单板块样式


  @media screen and (max-width: 1024px) {
    .section1{
      padding: 80px 5%;
      flex-direction: column;
      .l{
        width: 100%;
        h1{
          font-size: 24px;
          margin: 0 0 15px;
        }
        .text{
          font-size: 12px;
          line-height: 2;
        }
      }
      .img{
        width: 100%;
        height: auto;
        margin: 20px 0 0 0;
      }
    }
    .section2{
      padding: 0 5%;
      margin: 40px 0 0 0;
      .matter1{
        padding: 0 0 45px;
        &>h1{
          font-size: 24px;
        }
        .content{
          margin: 20px 0 0 0;
          gap: 20px 0;
          flex-direction: column;
          .item{
            width: 100%;
            height: auto;
            padding: 50px 5%;
            margin-top: 0!important;
            .circle{
              width: 70px;
            }
            .num{
              font-size: 24px;
              margin: 0 0 30px;
            }
            .b{
              h1{
                font-size: 24px;
                margin: 0 0 15px;
              }
              .pick{
                font-size: 13px;
                line-height: 1.8;
                max-height:unset!important;
              }
            }
          }
        }
      }
      .matter2{
        .title{
          h1{
            font-size: 24px;
            margin: 0 0 15px;
          }
          p{
            font-size: 13px;
            line-height: 1.8;
          }
        }
        .grid{
          margin: 30px 0 0 0;
          grid-template-columns: repeat(1,1fr);
          gap: 15px;
          .item{
            padding: 30px 5%;
            height: auto;
            .icon{
              width: 25px;
              height: 25px;
              margin: 0 0 20px;
            }
            h1{
              font-size: 24px;
              margin: 0 0 15px;
            }
            .text{
              font-size: 13px;
              line-height: 1.8;
            }
          }
        }
      }
      .matter3{
        margin: 35px 0;
        &>h1{
          font-size: 24px;
        }
        .content{
          margin: 20px 0 0 0;
          height: 150px;
        }
      }
      .matter4{
        margin: 0 0 30px;
        &>h1{
          font-size: 24px;
        }
        .swiper-pagination{
          margin: 25px auto 0;
          gap: 0 10px;
          span{
            width: 7px;
            height: 7px;
          }
        }
        .swiper1{
          margin: 20px 0 0 0;
          .swiper-slide{
            .item{
              height: auto;
              padding: 35px 5%;
              h1{
                font-size: 24px;
                margin: 0 0 10px;
              }
              .text{
                font-size: 13px;
                line-height: 1.8;
              }
              .download{
                width: 100%;
                height: 55px;
                padding: 0 15px;
                p{
                  font-size: 14px;
                }
                .circle{
                  height: 30px;
                  width: 30px;
                  svg{
                    width: 14px;
                    height: 14px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .form_common {
      padding: 50px 0;
      .wrap {
        width: 90%;
        .title {
          margin-bottom: 20px;
          h3 {
            font-size: 20px;
          }
          p {
            font-size: 14px;
          }
        }
        form {
          width: 100%;
          .item {
            width: 100%;
            margin-bottom: 15px;
            h5 {
              font-size: 16px;
              margin: 0 0 5px;
            }
            input {
              width: 100%;
              height: 40px;
              border-radius: 3px;
              padding: 0 15px;
              font-size: 16px;
            }
            select {
              width: 100%;
              height: 40px;
              font-size: 16px;

            }
            .select {
              img {
                width: 16px;
                height: 16px;
                right: 15px;
              }
            }
            textarea {
              width: 100%;
              height: 100px;
              font-size: 16px;
              padding: 10px 15px;
              border-radius: 3px;
            }
          }
          .prompt {
            h5 {
              font-size: 18px;
              margin: 0 0 6px;
            }
            p {
              font-size: 16px;
            }
          }
          .btn {
            margin: 40px 0 0;
            button {
              padding: 4px 15px;
              gap: 10px;
              font-size: 16px;
              border-radius: 80px;
              svg{
                width: 16px;
              }
            }
          }

        }
      }
    }
  }
}
@media screen and (max-width: 1920px) {
  .select2-container .select2-selection--single {
    height: 40px;
  }
  .select2-container--default .select2-selection--single {
    border-radius: 3px;
    padding: 0 15px;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    font-size: 16px;
  }
  .select2-dropdown {
    border: none;
    border-radius: 3px;
    padding: 14px;
  }
  .select2-results__option {
    padding: 12px 10px;
    border-radius: 3px;
  }
  .select2-container--default .select2-results__option--selected {
    background: #DCE8FE;
  }
  .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    border-color: #5E9EFF;
  }
  .select2-container--default .select2-results>.select2-results__options {
    max-height: 300px;
  }
}